<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/login.css">
</head>

<body>
  <div class="jumbotron">
    <h1>欢迎光临 GengGeng SHOP </h1>

    <div class="login">
      <form class="form-horizontal">
        <div class="form-group">
          <label for="username" class="col-sm-2 control-label">用户名</label>
          <div class="col-sm-10">
            <input name="name" type="text" class="form-control" id="username" placeholder="用户名">
          </div>
        </div>
        <div class="form-group">
          <label for="password" class="col-sm-2 control-label">密码</label>
          <div class="col-sm-10">
            <input name="pwd" type="password" class="form-control" id="password" placeholder="密码">
          </div>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
          </div>
        </div>
      </form>

      <h3></h3>
    </div>
  </div>

  <script src="./js/myAjax.js"></script>
  <script>
    // 页面中有form标签 
    // 获取标签form标签 添加 submit 提交事件
    // 执行提交实现时需要阻止默认事件执行

    // 获取标签
    // form标签
    const oForm = document.querySelector('form');

    // 账号标签
    const oIptName = document.querySelector('[name="name"]');

    // 密码标签
    const oIptPwd = document.querySelector('[name="pwd"]');

    // 写入提示信息标签
    const oH3 = document.querySelector('h3');

    // 给 form标签 添加 submit 提交事件
    oForm.addEventListener('submit', event => {
      // 通过事件对象阻止默认事件执行
      event.preventDefault();

      // 获取数据
      let name = oIptName.value;
      let pwd = oIptPwd.value;

      setLogin();
    })

    // async 定义的函数 执行异步请求

    async function setLogin() {
      // 获取数据
      let name = oIptName.value;
      let pwd = oIptPwd.value;

      
      // 通过 await调用 封装的promise函数
      const res = JSON.parse(await myPromise({
        url: 'http://localhost:8888/users/login',
        type: 'post',
        data: {
          username: name,
          password: pwd,
        },


      }));

      // 根据 res中 code数据 动态渲染生成页面

      if (res.code === 0) {
        oH3.innerHTML = `<span style="color:red">${res.message}</span>`;
      } else if (res.code === 1) {

        // 登录成功 存储 登录信息 
        // res.user 以 对象的形式 存储 当前登录人员的相关信息
        // res.token 以 字符串形式 存储 后端程序中 关键的数据参数
        // 这些信息需要存储在本地数据中
        // user 是一个对象 需要转化为json字符串存储到 localStorage 中
        // token 直接存储到 localStorage 中
        window.localStorage.user = JSON.stringify(res.user);
        window.localStorage.token = JSON.stringify(res.token);
        let num = 5;
        oH3.innerHTML = `<span style="color:red">登录成功 ${num}秒 以后 返回上一个页面 点击跳转 <a href="./index.html">首页面</a></span>`;
        let time = setInterval(function () {
          num--;
          if (num === 0) {
            clearInterval(time);
            // 返回 上一个页面
            window.history.back();
            // 终止之后的程序
            return;
          }
          oH3.innerHTML = `<span style="color:blue">登录成功 ${num}秒 以后 返回上一个页面 点击跳转 <a href="./index.html">首页面</a></span>`;

        }, 1000)
      }
    }

  </script>

</body>

</html>